<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>文章编辑</title>
        <link rel="stylesheet" href="css/editor-style.css" />
        <link rel="stylesheet" href="css/editormd.css" />
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
<div class="modal fade" tabindex="-1" role="dialog" id="tip-box">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">通知</h4>
    </div>
    <div class="modal-body">
        <p>{{info}}</p>
    </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="btn btn-primary" onclick="redirect('/admin')">返回首页</button>
            </div>
        </div>
        </nav>
        <div id="layout">
            <div id="form-panel">
                <form @submit.prevent="submit" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="post-title">文章标题</label>
                    <input type="text" name="postTitle" class="form-control" id="post-title" placeholder="文章标题" v-model="title">
                </div>
                <div class="form-group">
                    <label for="post-title">文章分类</label>
                    <select class="form-control" id="category-sel" v-model="selected">
                        <option v-for="category in categories" v-bind:value="category._id">{{category.title}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="post-pic">文章配图</label>
                    <img v-bind:src="imgPath" class="img-thumbnail">
                    <input type="hidden" name="imgPath" v-model="imgPath">
                    <input type="hidden" name="postId" v-model="postId">
                    <input type="file" id="post-pic" @change="upload">
                    <p class="help-block">请选择上传的文章配图</p>
                </div>

                <label for="post-pic">文章描述</label>
                <div id="discription-editormd">
                    <textarea style="display:none;" id="post-description"></textarea>
                </div>

                <label for="post-pic">文章正文</label>
                <div id="test-editormd">
                    <textarea style="display:none;" id="post-text"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">保存</button>
                </form>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/editormd.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/vue.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/jquery.cookie.js"></script>
        <script type="text/javascript">

            $(function() {

                loadCategoryInfo()

                setTimeout(loadPostInfo, 50)

                editormd("discription-editormd", {
                    width   : "100%",
                    height  : 340,
                    syncScrolling : "single",
                    path    : "editor/"
                });

                editormd("test-editormd", {
                    width   : "100%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "editor/"
                });
            });

            // 加载文章信息
            function loadPostInfo() {
                let postId = $.cookie('post_id')
                if (postId) {
                    getPostInfo(postId)
                }
            }
            
            // 获取文章信息
            function getPostInfo(postId) {
                axios.get(`/post/${postId}`)
                    .then(response => {
                        // console.log(response)
                        postVue.title = response.data.title
                        postVue.imgPath = response.data.imgPath
                        postVue.postId = response.data._id
                        postVue.selected = response.data.categoryId
                        console.log(response.data.postDescription)
                        console.log(response.data.text)
                        $('#post-description').val(response.data.postDescription)
                        $('#post-text').val(response.data.text)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }

            // 加载分类信息
            function loadCategoryInfo() {
                axios.get('/api/categories')
                    .then(function (response) {
                        postVue.categories = response.data
                        console.log(response)
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }

            var postVue = new Vue({
                el: '#form-panel',
                data: {
                    title: '',
                    imgPath: '',
                    postId: '',
                    categories: [],
                    selected: ''
                },
                methods: {
                    submit: function () {
                        submitPost({
                            title: this.title,
                            postDescription: $('#post-description').val(),
                            postText: $('#post-text').val(),
                            imgPath: this.imgPath,
                            postId: this.postId,
                            categoryId: this.selected,
                            categoryName: $('#category-sel').find("option:selected").text()
                        })
                    },
                    upload: function (event) {
                        console.log(event)
                        uploadImg(event.target.files[0])
                    }
                }
            })

            // 提示框对象
            var tipVue = new Vue({
                el: '#tip-box',
                data: {
                info: ''
                }
            })
            
            // 上传图片
            function uploadImg(file) {
                let param = new FormData()
                param.append('uploadImg', file, file.name)
                console.log(param.get('uploadImg')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                axios.post('/uploadImg', param, config)
                    .then(response => {
                        console.log(response.data)
                        postVue.imgPath = response.data.imgPath
                    })
            }
            
            // 提交一篇博客文章
            function submitPost(postInfo) {
                axios.post('/post', postInfo)
                .then(function (response) {
                    console.log(response)
                    if (response.data.error) {
                        tipVue.info = `${response.data.info}:${response.data.error}`
                    } else {
                        tipVue.info = response.data.info
                        $('#tip-box').on('hidden.bs.modal', function (e) {
                            redirect('/admin')
                        })
                    }
                    $('#tip-box').modal('show')
                })
                .catch(function (error) {
                    console.log(error)
                })
            }

            function redirect(url) {
                window.location.href = url
            }

        </script>
    </body>
</html>